<template>
  <div class="container">
    <el-card header="余额查询">
      <el-form
        :model="addForm"
        :rules="$rules"
        ref="formRef"
        class="flex-wrap pt-2 pb-2"
        status-icon
        label-width="8rem"
      >
        <!-- #region 服务商 -->
        <el-form-item
          :label="$language.local('ServiceProviderName')"
          prop="ServiceProviderName"
        >
          <select-name
            v-model="addForm.ServiceProviderName"
            label-key="ServiceName"
            apiName="/api/Common/GetServiceProviderList"
            @change="serviceChange"
          ></select-name>
        </el-form-item>
        <!-- #endregion -->
        <!-- #region 收款银行 -->
        <el-form-item
          :label="$language.local('ServiceBank')"
          prop="ServiceBank"
        >
          <select-name
            v-model="addForm.ServiceBank"
            label-key="BankName"
            :model="serviceBanks"
            @change="serviceBankChange"
          ></select-name>
        </el-form-item>
        <!-- #endregion -->
        <!-- #region 收款账号 -->
        <el-form-item
          :label="$language.local('ServiceAccountNo')"
          prop="ServiceAccountNo"
        >
          <xy-input
            v-model="addForm['ServiceAccountNo']"
            disabled
            class="service-account-no"
          ></xy-input>
        </el-form-item>
        <!-- #endregion -->
        <!-- #region 代付通道 -->
        <el-form-item
          :label="$language.local('PayChannelId')"
          prop="PayChannelId"
        >
          <select-id
            v-model="addForm['PayChannelId']"
            label-key="BankName"
            :model="payChannelList"
            @change="payChannelChange"
          ></select-id>
        </el-form-item>
        <!-- #endregion -->
      </el-form>
      <div class="form-footer pb-2">
        <el-button type="primary" @click="onSubmit">{{
          $language.local("查询")
        }}</el-button>
      </div>
    </el-card>

    <!-- <div v-show="result">
      <xy-input type="textarea" class="mt-2" v-model="result"></xy-input>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        sid: "",
        PayChannelName: "",
      },
      formKeys: {
        ServiceProviderName: "",
        ServiceBank: "",
        ServiceAccountNo: "",
        sid: "",
        PayChannelName: "",
      },
      serviceBanks: [],
      payChannelList: [],
      result: "",
    };
  },
  methods: {
    serviceChange(e) {
      if (!e) {
        return;
      }
      let data = {
        ServiceBank: "",
        ServiceAccountNo: "",
        PayChannelId: "",
      };
      this.addForm = { ...this.addForm, ...data };
      this.addForm.sid = e.Id;
      console.log(this.addForm);
      this.getServiceBanks(e.Id);
    },
    async getServiceBanks(id) {
      console.log(id);
      if (!id) {
        return;
      }
      let response = await this.$http.get(
        `/api/recharge/GetServiceBank?sid=${id}`
      );
      console.log(response);
      this.serviceBanks = response.data.Data.accountlist;
      this.payChannelList = response.data.Data.paychannellist;
    },

    serviceBankChange(e) {
      console.log(e);
      if (!e) {
        return;
      }
      this.addForm.ServiceAccountNo = e.AcctNo;
    },
    payChannelChange(e) {
      console.log(e);
      this.addForm.PayChannelName = e.BankName;
    },
    async onSubmit() {
      console.log(this.addForm);
      const valided = await this.$refs.formRef.validate().catch((err) => err);
      if (!valided) {
        return;
      }
      let query = {
        sid: this.addForm.sid,
        PayChannelName: this.addForm.PayChannelName,
      };
      const response = await this.$http.get(
        "/api/Common/getAccountBalance",
        query
      );
      console.log(response);
      this.result = response.data.Data;
      if (response.data.Data == "一致") {
        this.$message.success(response.data.Data);
      } else {
        this.$message.error(response.data.Data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 68%;
    transform: translateY(-10%);
    .flex-wrap {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        flex: 1;
        min-width: 50%;
        max-width: 50%;
        // width: 50%;
        padding-right: 1rem;
      }
    }
  }
}
</style>
